<!DOCTYPE html>
<html lang="en">
<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>jQuery plugin: &#8216;autoResize&#8217; &#8211; James Padolsey</title>
    
    <link rel="stylesheet" href="http://james.padolsey.com/wp-content/themes/james.padolsey/style.css?35" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="../js/autoresize.jquery.min.js" media="screen" />
    
  <script type="text/javascript" src="../js/jquery-1.5.min.js"></script>

</head>
<body class="body">

<textarea id="resize-demo" style="width: 400px; padding: 10px; height: 50px; display: block; font-family:Sans-serif; font-size:1.2em;">Type something in here, when you get close to the end the box will expand!</textarea>

<script type="text/javascript">/*<![CDATA[*/(function(a){a.fn.autoResize=function(j){var b=a.extend({onResize:function(){},animate:true,animateDuration:150,animateCallback:function(){},extraSpace:20,limit:1000},j);this.filter('textarea').each(function(){var c=a(this).css({resize:'none','overflow-y':'hidden'}),k=c.height(),f=(function(){var l=['height','width','lineHeight','textDecoration','letterSpacing'],h={};a.each(l,function(d,e){h[e]=c.css(e)});return c.clone().removeAttr('id').removeAttr('name').css({position:'absolute',top:0,left:-9999}).css(h).insertBefore(c)})(),i=null,g=function(){f.height(0).val(a(this).val()).scrollTop(10000);var d=Math.max(f.scrollTop(),k)+b.extraSpace,e=a(this).add(f);if(i===d){return}i=d;if(d>=b.limit){a(this).css('overflow-y','');return}b.onResize.call(this);b.animate&&c.css('display')==='block'?e.stop().animate({height:d},b.animateDuration,b.animateCallback):e.height(d)};c.unbind('.dynSiz').bind('keyup.dynSiz',g).bind('keydown.dynSiz',g).bind('change.dynSiz',g)});return this}})(jQuery);

$('textarea#resize-demo').autoResize();/*]]>*/</script>
  
</body>
</html>